<template>
	<a-list v-bind="allAttrs" :id="'zhList' + columnId" :name="'zhList' + columnId" :size="mySize" >
    <template #[item]="data" v-for="item in Object.keys($slots)">
      <slot :name="item" v-bind="data || {}"></slot>
    </template>
  </a-list>
</template>
<script lang="ts" setup name="zh-list">
import { theme } from '@/store';
//------------------接收传入参数(组件)-------------------
const props = defineProps({
  columnId: {
		// 字段ID、控件ID，用途非常广
		type: [Number, String],
		default: () => Math.floor(Math.random() * 1000000 + 1), // new Date().valueOf()
	},
});

//------------------定义子组件---------------------------

//------------------内部变量定义-------------------------
const attrs = useAttrs();
const allAttrs = computed(() => {
	return Object.assign(props.extend||{}, attrs);
});
const state = reactive({
	mySize: allAttrs.value.size||theme.globalComponentSize,
});
console.log(state.mySize)
//------------------定义调用方法-------------------------

//------------------监听--------------------------------
watch(
	() => theme.globalComponentSize,
	() => {
    if (attrs.size) {
      state.mySize = attrs.size;
    } else {
      state.mySize = theme.globalComponentSize;
    }
	}
);
//------------------初始化------------------------------
onMounted(()=>{})
// 输出
const { mySize } = toRefs(state);
//------------设置给父组件调用的数据/方法(组件)-----------

</script>
<style lang="scss">
.ant-list-item {
    padding: 10px 0 !important;
    color: var(--el-text-color-regular);
}
</style>
